<template>
  <div class="ques-list">
    <div class="ques-list">
      <table-search :title="title" @inputBtn="inpSearch"></table-search>
    </div>
    <table-list
      :toTableData="tableData"
      :tableHeader="tableHeader"
      :deleteEdit="deleteEdit"
      :btn1="btn1"
      :btn2="btn2"
      @btn1="EditDelete"
      @btn2="handleSee"
    ></table-list>
    <!-- 弹出框表单 -->
    <div class="list-from">
      <el-dialog
        :title="'问卷：' + qName"
        :visible.sync="dialogFormVisible"
        width="38%"
      >
        <ques-detail :q_id="qId"></ques-detail>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import { request } from "@/network/request.js";
import TableSearch from "../../components/common/TableSearch";
import TableList from "../../components/common/TableList.vue";
import QuesDetail from "./QuesDetail.vue";

export default {
  data() {
    return {
      title: "问卷标题搜索",
      qId: "",
      qName: "",
      tableHeader: [
        { prop: "q_name", label: "问卷题目" },
        { prop: "date", label: "发布时间" },
      ],
      tableData: [], //传递给子组件数据
      deleteEdit: {
        options: 1,
        delete: 1,
        edit: 1,
      },
      btn1: "删除",
      btn2: "查看统计",
      editRow: {},
      dialogFormVisible: false,
      formLabelWidth: "100px",
      numberValidateForm: {
        water: "",
        electric: "",
      },
    };
  },
  components: {
    TableList,
    TableSearch,
    QuesDetail,
  },
  created() {
    this.requestData();
  },
  methods: {
    requestData() {
      // console.log("555");
      return new Promise((resove, reject) => {
        request({
          url: "/b-ques-name-list", //传入confing,在baseURL后面的值
        })
          .then((res) => {
            this.tableData = res.data.data.sort((a, b) => {
              return a.id < b.id ? 1 : -1;
            });
            resove();
          })
          .catch((err) => {
            console.log(err);
            reject();
          });
      });
    },
    //接收子组件，查看操作
    handleSee(row) {
      this.editRow = row;
      this.dialogFormVisible = true;
      this.qId = row.q_id;
      this.qName = row.q_name;
      // this.$router.push({ path: "/home/community-ques/ques-detail" });
      // console.log(111);
      // console.log(row);
    },
    //接收子组件删除操作
    EditDelete(row) {
      console.log(22);
      // console.log(row);
      this.$confirm("删除该问卷调查, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          request({
            method: "post",
            url: "/delete_ques", //传入confing,在baseURL后面的值
            data: {
              qId: row.q_id,
            },
          })
            .then((res) => {
              // console.log(res); //res.mesg=="0k"
              this.requestData().then(() => {
                this.$message({
                  type: "success",
                  message: "删除成功!",
                });
              });
            })
            .catch((err) => {
              console.log(err);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除",
          });
        });
    },
    inpSearch(title) {
      this.requestData().then(() => {
        if (title.length >= 1) {
          let newShowData = this.tableData.filter((s) => {
            return s.q_name.includes(title);
          });
          this.tableData = newShowData;
          console.log(newShowData);
        }
      });
    },
  },
};
</script>

<style lang="scss">
@import "@/assets/styles/global.scss";
.ques-list {
  .ques-list {
    box-sizing: border-box;
    // margin: 20px;
    width: 100%;
    // height: 100%;
    // padding: 20px;
    .ques-list-start {
      width: 100%;
      // height: 120px;
      background-color: #ffffff;
      color: #000;
      margin-bottom: 10px;
      padding: 10px 20px;
      box-sizing: border-box;
      .btn {
        margin-left: 10px;
      }
      // @include center;
    }

    .ques-list-table {
      // height: 100%;
      background-color: #ffffff;
      padding: 0 10px;
      box-sizing: border-box;
      // overflow: scroll;
      // overflow-y: scroll;
      .pagination {
        padding-top: 10px;
        padding-bottom: 100px;
        display: flex;
        @include right;
        background-color: #ffffff;
      }
    }
  }
}
</style>
